<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <include file="_layout/mall.head.html" />
    <link rel="stylesheet" href="__CDN__/css/usercenter.css" type="text/css" />
    <style type="text/css">
	.choosed{border-bottom: 1px solid #00a0f8!important;border-right: 3px solid #00a0f8;color: #00a0f8;}
	.color-bule{color:#00a0f8}
	</style>
</head>
<body>
    <div class="container" style="padding-bottom: 60px;">
        <div class="content ">
            <div class="content-body">
                <div style="">
                	<div class="scale_wh personal-header" style="padding-bottom: 38%;">
				    	<div class="scale_content">
				    		<div class="headimg js-headimgurl">
				    			<div style="background-image: url({$user.headimgurl});"></div>
				    		</div>
				    		<div class="level-money">尊贵的微商联盟会员</div>
				    	</div>
			      	</div>
                </div>

                <div class="order-related">
                    <div class="block block-list" style="padding: 10px;line-height: 18px;border-top: none;">
                    	此功能每个<span class="color-bule">微信号</span>只能使用一次，仅用于<span class="color-bule">更换</span>微信号或<span class="color-bule">找回</span>代理关系，其他情况请勿使用，否则后果自负。绑定成功后您当前账号的数据将丢失，并无法恢复，请慎重操作。
                    </div>
                </div>
                <if condition="$cando">
				<div class="address-ui address-fm" method="post" style="margin-top: 15px;">
					<div class="js-list hide" style="background-color: #fff;border-top: 1px solid #e5e5e5;margin-bottom: 15px;"></div>
					<div class="block form">
						<div class="block-item no-top-border">
							<label>手机号码</label>
							<input type="tel" name="mobile" class="js-mobile" value="{$user['mobile']}" placeholder="您在旧平台绑定的手机号码" maxlength="11">
						</div>
						<div class="block-item js-code_view hide">
							<label>验证码</label>
							<div class="area-layout">
								<input type="text" class="js-code" placeholder="验证码" maxlength="6">
								<button type="button" class="js-get_code tag tag-big tag-orange" style="position: absolute; right: 0; top: 0; bottom: 0; font-size: 12px; padding: 0 20px;">获取验证码</button>
							</div>
						</div>
					</div>
					<div class="action-container">
						<button type="button" class="js-search btn btn-block btn-red">查找</button>
						<button type="button" class="js-bind btn btn-block btn-green hide">绑定</button>
					</div>
				</div>
				<else/>
				<div class="block">
					<div class="block-item" style="border-top:none;color:#f60;text-align:center;">
						每个微信号只能使用一次
					</div>
				</div>
				</if>
			</div>
        	<!--底部结束-->
			<include file="_layout/mall.footer.html" />
        </div>
    </div>
    <script>
    require(['jquery'], function(){
    	var $mobile = $('.js-mobile'),
    	    $list = $('.js-list'),
    	    $btnSearch = $('.js-search'),
    	    $btnBind = $('.js-bind')
    	    $code_view = $('.js-code_view'),
    	    $get_code = $('.js-get_code'),
    	    $code = $('.js-code'),
    	    mobile = '';
    	
    	$btnSearch.on('click', function(){
    		mobile = $mobile.val();
    		if(!/^1[3|4|5|7|8]\d{9}$/.test(mobile)){
    			return toast.show('请输入正确的手机号码'), false;
    		}
    		
    		$.ajax({
    			url: '/h5/xiufu/search',
    			type: 'post',
    			data: {mobile: mobile},
    			dataType: 'json',
    			success: function(list){
    				var html = '<p style="border-bottom: 1px solid #ddd;padding: 5px;text-align: center;color: #f0342b;">点击要绑定的账号↓</p>';
    				for(var i=0; i<list.length; i++){
    					html += '<div class="js-uid" data-id="'+list[i]['id']+'" style="padding: 10px;line-height: 22px;border-bottom: 1px solid #e5e5e5;">';
    					html += '	<img src="'+list[i]['headimgurl']+'" style="width: 45px; float: left;">';
    					html += '	<div style="margin-left: 55px">';
    					html += ' 		<div><label>'+list[i]['nick']+'</label><label class="pull-right">'+list[i]['agent_str']+';'+ list[i]['created'] +'</label></div>';
    					html += ' 		<div style="font-size: 12px;">';
    					html += ' 			'+list[i]['parent']+'；<label class="pull-right">'+list[i]['app_name']+'</label>';
    					html += ' 		</div>';
    					html += ' 	</div>';
    					html += '</div>';
    				}
    				$list.html(html);
    				
    				if(list.length == 0){
    					alert('未找到老用户' + mobile);
    				}else{
    					$btnSearch.hide();
    					$btnBind.removeClass('hide');
    					$code_view.removeClass('hide');
    					$list.removeClass('hide');
    					$mobile.attr('disabled', 'disabled');
    				}
    			}
    		});
    		return false;
    	});
    	
    	$list.on('click', '.js-uid',function(){
    		var $this = $(this);
    		if(!$this.hasClass('choosed')){
    			$this.addClass('choosed').siblings().removeClass('choosed');
    		}
    		return false;
    	});
    	
    	// 获取验证码
    	$get_code.on('click', function(){
			var btn = this;
			btn.disabled = true;
			$.ajax({
				url: '/h5/xiufu/code',
				data: {mobile: mobile},
				type: 'post',
				datatype: 'json',
				success: function(){
					var times = 60;
					var timer = setInterval(function(){
						btn.innerHTML = times + '秒后重新获取';
						times--;
						if(times == 0){
							clearInterval(timer);
							btn.innerHTML = '重新获取';
							btn.disabled = false;
						}
					}, 1000);
				},
				error: function(){
					btn.disabled = false;
				}
			});
			
			return false;
		});
    	
    	// 绑定
    	$btnBind.on('click', function(){
    		var $choosed = $list.children('.choosed');
    		if($choosed.length == 0){
    			return toast.show('请选择要同步的账号'), false;
    		}
    		
    		var post = {code: $code.val(), mobile: mobile, id: $choosed.data('id')};
    		if(!/^\d{6}$/.test(post.code)){
    			return toast.show('请输入6位数字验证码'), false;
    		}
    		
    		if(!confirm('操作不可逆，确定绑定吗？')){
    			return false;
    		}
    		
    		$.ajax({
    			url: '/h5/xiufu/bind',
    			dataType: 'json',
    			data: post,
    			type: 'post',
    			waitting: '正在绑定',
    			success: function(){
    				window.location.href = '/h5/personal';
    			}
    		});
    		return false;
    	});
    });
    </script>
</body>
</html>